<template>
  <div>
    <div class="search-box">
      <transition name="el-zoom-in-top">
        <el-form :inline="true"   class="search-form" size="medium" label-width="100px">
          <el-form-item label="车架号：">
            <el-input v-model="carListParams.carVin" placeholder="请输入车架号" style="width:193px" clearable></el-input>
            <el-button type="primary" style="margin-left: 10px" icon="el-icon-search" @click="searchCarList">查询</el-button>
          </el-form-item>
        </el-form>
      </transition>
    </div>
    <el-table :data="carList" border width="100%" v-loading="loading">
      <el-table-column prop="carImageUrl" label="首图" width="170" height="80" align="center">
        <template slot-scope="scope" style="position:relative">
          <div class="a-link">
            <img :src="imgUrl + scope.row.carImageUrl + '.r_300xh_200'" class="car-image" onerror="javascript:this.src='static/images/default.svg'">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="车辆信息" align="left">
        <template slot-scope="scope">
          <h1>{{scope.row.carTitle}}</h1>
          <p>车架号：{{scope.row.carVin}}</p>
          <p>上牌日期：{{scope.row.carLicenceDate | filterDateForDay}}</p>
          <p class="color-span">
            <span class="color1" v-if="scope.row.carLicenceState == 1">{{scope.row.carLicenceDate | filterDateForDay}}</span>
            <span class="color1" v-if="scope.row.carLicenceState == 2">未上牌</span>
            <span class="color1" v-if="scope.row.carLicenceState == 3">新车</span>
            <span class="color2" v-if="scope.row.carMileage && scope.row.carMileage != 0">{{scope.row.carMileage}}万公里</span>
            <span class="color3" v-if="scope.row.carDisplacement">{{scope.row.carDisplacement || '-'}}{{scope.row.carInletModel || '-'}}</span>
            <span class="color4">{{scope.row.carOutColor}}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="商铺信息" align="left">
        <template slot-scope="scope">
          <p>车商名称：{{scope.row.shop.shopName}}</p>
          <p>联系方式：{{scope.row.shop.shopMobile}}</p>
        </template>
      </el-table-column>
      <el-table-column label="车辆状态" width="240" prop="carImageUrl" align="center">
        <template slot-scope="scope">
          <p v-if="scope.row.carStockState != 20"><el-tag :type="scope.row.carStockState == 20?'success':'info'" size="mini">{{scope.row.carStockState | filterCarStockState}}</el-tag></p>
          <p v-if="scope.row.carStockState == 20"><el-tag :type="scope.row.carSaleState == 20?'success':'info'" size="mini">{{scope.row.carSaleState | filterCarSaleState }}</el-tag></p>
          <p><el-tag :type="scope.row.carDetectState>=520?'success':'info'" size="mini">{{scope.row.carDetectState | filterCarDetectState }}</el-tag></p>
          <p><el-tag :type="scope.row.carSiteState>=440?'danger':'info'" size="mini"><span v-if="scope.row.carSiteState == 440">{{scope.row.carSiteTime | filterDateForSec}}</span>{{scope.row.carSiteState | filterCarSiteState }}</el-tag></p>
          <p v-if="scope.row.carSiteStatus == 1" ><el-tag type="danger" size="mini">该车已出场5个小时以上！</el-tag></p>
          <p v-if="scope.row.carRfid"><el-tag type="success" size="mini">RFID:{{scope.row.carRfid}}</el-tag></p>
          <p v-else=""><el-tag type="danger" size="mini">RFID未绑定</el-tag></p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"  @click.native="deleteCar(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import '../../assets/css/car.css'
  export default {
    name: "deletecar",
    data(){
      return {
        imgUrl:imageUrl,
        carListParams:{
          carVin:'',
          marketId:this.$marketId,
          pageSize:10,
          pageIndex:1
        }
      }
    },
    computed:{
      carList(){
        return this.$store.state.system.carList
      },
      loading(){
        return this.$store.state.system.loading
      },
      deleteStatus(){
        return this.$store.state.system.deleteStatus
      },
      tips(){
        return this.$store.state.system.tips
      }
    },
    watch:{
      'deleteStatus'(){
        this.$message(this.tips);
      }
    },
    methods:{
      deleteCar(item){
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteCar',item);
          this.carListParams.carVin = '';
          this.$store.dispatch('getSystemCarList',this.carListParams)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      searchCarList(){
        if(this.carListParams.carVin===''){
          this.$message({
            type:'warning',
              message:'请输入车架号'
          })
        }else{
          this.$store.dispatch('getSystemCarList',this.carListParams);
        }
      }
    }
  }
</script>

<style scoped>

</style>
